<template>
    <div class="search">
        <el-tabs v-model="type" class="demo-tabs">
            <el-tab-pane label="单曲" :name="1">
                <div class="songlist">
                    <SongListBig :songList="datalist.songs" :songCount="+datalist.songCount" :isPagination="true"
                        @change="change">
                    </SongListBig>
                </div>
            </el-tab-pane>
            <el-tab-pane label="歌手" :name="100">
                <div class="singer" v-if="type == 100">
                    <el-row>
                        <el-col :span="3" v-for="item in singerlist" :key="item" v-show="item.img1v1 != -1">
                            <div class="singer-item">
                                <el-image :src="item.img1v1Url" :size="'large'"
                                    style="width: 100%; height: 100%;"></el-image>
                                <div class="singer-name" @click="router.push(`/artist?id=${item.id}`)">
                                    {{ item.name }}
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="歌单" :name="1000">
                <div class="wrapper" v-if="type == 1000">
                    <SongListMove :playlists="playlists" v-infinite-scroll="listload" :infinite-scroll-disabled="gdisstop">
                    </SongListMove>
                    <Loading v-if="!gdisstop"></Loading>
                </div>
            </el-tab-pane>
            <el-tab-pane label="MV" :name="1004">
                <el-row :gutter="0" v-if="type == 1004" v-infinite-scroll="mvlistload" :infinite-scroll-disabled="mvisstop">
                    <el-col :span="4" v-for="item in mvlist">
                        <div class="mv-info">
                            <div class="jiaobiao">
                                <i class="iconfont icon-play"></i><span>{{ formartNum(item.playCount) }}</span>
                            </div>
                            <div class="play-icon">
                                <i class="iconfont icon-bofang2"></i>
                            </div>
                            <div @click="router.push(`/mv/detail?id=${item.id}`)"><el-image :src="item.cover"></el-image>
                            </div>

                            <div class="artist">
                                <div class="artist-name" @click="router.push(`/mv/detail?id=${item.id}`)">
                                    {{ item.name }}
                                </div>
                                <div class="artist-alias">
                                    <span type="info" v-for="alias, index in item.artists"
                                        @click="router.push(`/artist?id=${alias.id}`)">{{ index == 0 ? alias.name : '/' +
                                            alias.name
                                        }}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <!-- <el-empty description="该类别暂无数据" style="margin: 0 auto;" v-if="mvlist.length == 0" /> -->
                    <Loading v-if="!mvisstop"></Loading>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import Loading from '@/components/Loading.vue'
import SongListMove from '@/components/playlist/SongListMove.vue'
import SongListBig from '@/components/song/SongListBig.vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getSearch } from '@/api/search'
import { formatSongDetail } from '@/utils/util'
import { formartNum } from '@/utils/util'

const router = useRouter()
const type = ref(1)
const typeKey = {
    1: '单曲',
    10: '专辑',
    100: '歌手',
    1000: '歌单',
    1002: '用户',
    1004: 'MV',
    1006: '歌词',
    1009: '电台',
    1014: '视频',
    1018: '综合'
}
const route = useRoute()
const keywords = ref('')
const datalist = ref({})
const singerlist = ref([])
const playlists = ref([])
const mvlist = ref([])
const gdisstop = ref(false)
const mvisstop = ref(false)
onMounted(async () => {
    keywords.value = route.query.keywords
    getSong()
})
const getSong = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: 0
    })
    datalist.value = res.result
    datalist.value.songs = datalist.value.songs.map(item => formatSongDetail(item))
}
const change = async (value) => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: (value - 1) * 30
    })
    datalist.value = res.result
    datalist.value.songs = datalist.value.songs.map(item => formatSongDetail(item))
}
const getAr = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 80,
        offset: 0
    })
    singerlist.value = res.result.artists
}
const getPlayLists = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: 0
    })
    playlists.value = res.result.playlists
}
const getMvList = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: 0
    })
    // playlists.value = res.result.playlists
    mvlist.value = res.result.mvs
}
watch(() => type.value, (newVal) => {
    if (newVal == 1) {
        getSong()
    }
    if (newVal == 100) {
        getAr()
    }
    if (newVal == 1000) {
        // getPlayLists()
    }
    if (newVal == 1004) {
        // getMvList()
    }
})

const listload = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: playlists.value.length
    })
    playlists.value = playlists.value.concat(res.result.playlists)
    if (playlists.value.length > res.result.playlistCount) {
        gdisstop.value = true
    }
}

const mvlistload = async () => {
    const res = await getSearch({
        keywords: route.query.keywords,
        type: type.value,
        limit: 30,
        offset: mvlist.value.length
    })
    mvlist.value = mvlist.value.concat(res.result.mvs)
    if (mvlist.value.length > res.result.mvCount) {
        mvisstop.value = true
    }
}
</script>

<style lang="less" scoped>
.search {
    // margin: 40px 10px;
    height: calc(100vh - 140px);

    .songlist {
        margin-bottom: 80px;
    }

    .singer {
        margin-bottom: 80px;

        .singer-item {
            margin: 20px 10px;
            cursor: pointer;
        }

        .singer-name {
            font-size: 14px;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #409eff;
        }
    }

    .wrapper {
        // min-height: 320px;
        // // height: 100%;
        margin-bottom: 80px;
    }

    .mv-info {
        position: relative;
        margin: 20px 8px 80px 8px;

        &:hover {
            .play-icon {
                opacity: 1;
            }
        }

        .jiaobiao {
            position: absolute;
            z-index: 9;
            top: 0;
            right: 0;
            padding: 10px;
            color: white;
            font-size: 12px;

            i {
                font-size: 12px;
            }
        }

        .play-icon {
            position: absolute;
            //top的值为图片高度的一半减去icon的高度的一半
            top: calc(60% - 25px);
            right: 3%;
            padding: 5px;
            cursor: pointer;
            z-index: 9;
            opacity: 0;
            transition: all .3s ease-in-out;

            i {
                font-size: 25px;
                color: white;
            }
        }

        :deep(.el-image) {
            cursor: pointer;
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 30px -5px rgba(0, 0, 0, .5);

            .el-image__inner {
                position: relative;
                z-index: -1;
                vertical-align: top;
            }

        }

        .artist {
            margin-top: 10px;

            .artist-name {
                font-size: 14px;
                color: #141414;
                cursor: pointer;
                //溢出隐藏显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // display: inline-block;

            }

            .artist-alias {
                span {
                    font-size: 13px;
                    color: var(--el-color-info);
                    cursor: pointer;
                }
            }
        }

    }
}
</style>